<div ng-include="sys_html('common/_header')"></div>
<style>
.fe-floatright-bottom .icon {
    display: block;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 100%;
    color: #fff;
    line-height: 1.6rem;
}
</style>
<div ng-if="pagedata.showredpage" class="popup">
	<style>
	  .rp-container {
    padding-left:10px;
    padding-right:10px;
  }
  .rp-background-lightgray {
    background-color:rgb(240, 240, 240);
  }
  .rp-record {
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid rgb(240, 240, 240) ;
    display: flex;
    flex-direction: row;
    align-items: center;
  }
  .rp-record .avatar {
    width: 50px;
    border-radius: 3px;
  }
  .rp-record .info {
    display: inline-block;
    width: 100%;
  }
  .rp-record .desc {
    display:inline-block;
    margin-left: 1em;
  }
  .rp-record .datetime {
    color: rgb(200, 200, 200);
  }
  .rp-record .amount {
    float: right;
  }
 #unpaid .unpaid-alert .unpaid-subtitle{
    color: #999;
    text-align: center;
    width: 13rem;
    margin: .6rem auto
}
	</style>
<div class="fui-page">
	<div class="fui-content">
			<div style="color:#ffcc00;box-shadow:0 1px 2px gray;padding: 0 3px;text-align:center;margin-bottom:0.3rem;height:220px;background-color:#e52600;border-bottom-right-radius:50% 70px;border-bottom-left-radius:50% 70px;">
			  <div style="text-align: center;padding-top:1rem;">
				<div style="">
				  <img ng-src="{{tomedia(pagedata.red.member.avatar) ||'../addons/jy_city/resource/images/avatar.png'}}" style="display:inline-block;border-radius:5;width:25px;height:24px;margin:0;padding:0">
				  <span style="padding-left:5px;vertical-align:middle;font-weight:bold;line-height:24px;font-size:20px;">{{pagedata.red.member.nickname}}的红包</span>
				</div>
				<div style="margin: 10px;"><small>【{{pagedata.red.title || '现金红包'}}】</small></div>
				<div style="margin-top:1rem;">
				  <span style="font-size: 1.5rem;
							   vertical-align: top;
							   padding-right: 0.5rem;
							   font-weight: bold;">¥</span>
				  <span style="line-height:1em;font-size:2rem;">{{pagedata.red.allfee ||'0.00'}}</span>
				  </div>
				<div class="bold" ng-click="pagedata.getred()"><small>一键领取红包 >></small></div>
			  </div>
			</div>
			<div style="border-bottom:1px solid #f0f0f0;">
				<div class="rp-container c" style="margin-top:10px;">
					<div style="padding-top:0.5em;padding-bottom:0.5em;">
					已领取￥{{pagedata.red.isfee ||'0.00'}}，待领取￥{{pagedata.red.lastfee ||'0.00'}}
					</div>
				</div>
			</div>
		  <div class="rp-container"  style="background-color:white;height:9rem;overflow-y:scroll"> 
			<div ng-repeat="x in pagedata.red.list" class="rp-record">
			  <img ng-src="{{tomedia(x.member.avatar) ||'../core/resource/images/nopic.jpg'}}" class="avatar">
			  <span class="info" style="vertical-align: center">
				<span class="desc">
				  <span class="nickname">{{x.member.nickname}}</span><br/>
				  <span class="datetime" style="font-size:0.6rem">{{x.createtime}}</span>
				</span>
				<span class="amount">{{x.fee}}元</span>
			  </span>
			</div>
			<div class="content-empty" style="margin-top:1rem" ng-show="!pagedata.red.list || pagedata.red.list.length == 0">
			  <i class="icon icon-ai-hongbao" style="width: 6rem;margin-bottom: 0.5rem;"></i><br/><p style="color: #999;font-size: .75rem">您暂时没有的红包记录！</p>
			</div>
		  </div>
		</div>
	</div>
</div>
<audio id="openvoice" controls preload="auto" style="display:none;">
	<source ng-src="{{tomedia(pagedata.red.red_mp3) || '../addons/jy_merch/resource/red.wav'}}"></source>
</audio>
<script>
scope.pagedata.getred=function(){
	if(!scope.pagedata.red.list || scope.pagedata.red.list.length == 0){
		scope.message('暂时没有红包可以领取！');
		return false;
	}
	scope.post_json('jy_merch/index/getred/',{},function(res){
		scope.pagedata.showredpage=false
		scope.message('领取成功！');
		$("#openvoice")[0].play();
		scope.$evalAsync();
	});
}
</script>